<!--实时统计-->
<template>
  <div class="realTimeStatistic">
    <el-row class="top">
      <el-col :span="4">
        <p>{{totalStatistics.ShouldExamineeCount}}<span> 人</span></p>
        <p>应参考考生</p>
      </el-col>
      <el-col :span="4">
        <p>{{totalStatistics.PracticalExamineeCount}} <span> 人</span></p>
        <p>实考考生</p>
      </el-col>
      <el-col :span="4">
        <p>{{totalStatistics.GroupCount}} <span> 组</span></p>
        <p>团队数</p>
      </el-col>
      <el-col :span="4">
        <p>{{totalStatistics.HasPaperPeopleCount}} <span> 人</span></p>
        <p>当前交卷人数</p>
      </el-col>
      <el-col :span="4">
        <p>{{totalStatistics.GroupHighestScore}} <span> 分</span></p>
        <p>团队最高分</p>
      </el-col>
      <el-col :span="4">
        <p>{{totalStatistics.GroupAverageScore}} <span> 分</span></p>
        <p>团队平均分</p>
      </el-col>
    </el-row>
    <el-row class="line"></el-row>
    <el-row class="bottom">
      <el-row  v-for="(item,ind) in list" :key="ind+'c'" class="teamWrap">
        <el-col class="status"><span>{{item.VenuesStatus}}</span></el-col>
        <el-col :span="12" class="teamGrade">
          <p class="competitionName">{{item.MatchName}}：</p>
          <div class="gradeWrap">
            <el-row>
              <el-col :span="12">团队最高分：<i>{{item.GroupHighestScore}}</i><b>分</b></el-col>
              <el-col :span="12">团队最低分：<i>{{item.GroupLowestScore}}</i><b>分</b></el-col>
            </el-row>
            <el-row>
              <el-col :span="12">团队平均分：<i>{{item.GroupAverageScore}}</i><b>分</b></el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="12" class="postGrade">
          <p class="postTitle">岗位最高分：</p>
          <div class="postWrap">
<!--            <el-row v-for="(postList,i) in item.postMax" :key="i+'v'">-->
            <el-row >
              <el-col :span="12" v-for="(post,k) in item.VenuesPositionList" :key="k+'n'">
                {{post.PositionName}}：<i>{{post.PositionHighScore}}</i><b>分</b>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>
  import {mapGetters} from "vuex";
    export default {
        name: "realTimeStatistic",
        data() {
            return {
              totalStatistics:{},//总统计
                list: []
            }
        },
      computed: {
        ...mapGetters({
          userInfo: ["userInfo"]
        }),
      },
      created() {
          this.init()
      },
      methods:{
          init() {
            this.getcompetitionrealtimedataFn();
            this.getvenuesrealtimedatalistFn();
          },
        //获取赛事实时数据(赛务管理)
        getcompetitionrealtimedataFn() {
          let params = {
            taskId: this.userInfo.TaskId
          };
          this.$api.competitionReportService.getcompetitionrealtimedata(params).then(res => {
            // console.log(res,'获取赛事实时数据(赛务管理)');
            if(res.Code == 200){
              res.Data.GroupHighestScore = Number(res.Data.GroupHighestScore.toFixed(4));
              res.Data.GroupAverageScore = Number(res.Data.GroupAverageScore.toFixed(4));
              this.totalStatistics = res.Data
            }
          }).catch(err =>{
            console.log(err,'err');
          })
        },
        //获取场次实时数据列表(赛务管理)
        getvenuesrealtimedatalistFn() {
          let params = {
            taskId: this.userInfo.TaskId
          };
          this.$api.competitionReportService.getvenuesrealtimedatalist(params).then(res => {
            // console.log(res,'获取场次实时数据列表(赛务管理)');
            if(res.Code == 200){
              res.Data.forEach(v => {
                v.GroupHighestScore = Number(v.GroupHighestScore.toFixed(4));
                v.GroupAverageScore = Number(v.GroupAverageScore.toFixed(4));
                v.GroupLowestScore = Number(v.GroupLowestScore.toFixed(4));
                v.VenuesPositionList.forEach(val => {
                  val.PositionHighScore = Number(val.PositionHighScore.toFixed(4));
                });
              })

              this.list = res.Data
            }
          }).catch(err =>{
            console.log(err,'err');
          })
        },
      }
    }
</script>

<style lang="less">
  .realTimeStatistic {
    /*display: flex;*/
    /*flex-direction: column;*/

    .top {
      width: 100%;
      /*background: #fff;*/
      /*border-bottom: 10px solid #f2f2f2;*/
      /*margin-bottom: 10px;*/
      border-radius: 4px;

      .el-col {
        text-align: center;
        box-sizing: border-box;
        padding: 40px 0;
        height: 135px;

        p:nth-of-type(1) {
          font-size: 24px;
          font-family: DINAlternate-Bold, DINAlternate;
          font-weight: bold;
          color: rgba(245, 96, 35, 1);
          margin-bottom: 10px;

          span {
            font-size: 12px;
            margin-left: -5px;
          }
        }

        p:nth-of-type(2) {
          font-size: 14px;
          font-family: PingFangHK-Regular, PingFangHK;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
        }
      }
    }

    .line {
      width: 100%;
      height: 10px;
      background: #f2f2f2;
    }

    .bottom {
      box-sizing: border-box;
      padding: 30px 0;
      .teamWrap{
        box-sizing: border-box;
        padding: 30px 45px;
        .status{
          span{
            font-size:14px;
            font-family:PingFangHK-Regular,PingFangHK;
            font-weight:400;
            color:rgba(51,51,51,1);
            padding: 3px 16px;
            background:rgba(232,232,232,1);
            border-radius:13px;
          }
        }
        .teamGrade{
          padding-right: 15px;
          .competitionName{
            font-size:18px;
            font-family:PingFangHK-Medium,PingFangHK;
            font-weight:600;
            color:rgba(51,51,51,1);
            padding-left: 5px;
            margin: 20px 0 12px;
            box-sizing: border-box;

          }
          .gradeWrap{
            border:1px solid rgba(237,237,237,1);
            box-sizing: border-box;
            .el-row{
              height: 50px;
              line-height: 48px;
              font-size:14px;
              font-family:PingFangHK-Regular,PingFangHK;
              font-weight:400;
              color:rgba(51,51,51,1);
              text-align: left;
              &:nth-of-type(2){
                border-top: 1px solid rgba(237,237,237,1);
                .el-col{
                  i{
                    color: #02B4D0;
                  }
                }
              }
              .el-col{
                padding-left: 21px;
                border-right: 1px solid #EDEDED;
                &:nth-of-type(2){
                  border-right: none;
                  float: right;
                  i{
                    color: #2386F5;
                  }
                }
                i{
                  font-style: normal;
                  font-size: 18px;
                  color: #F56023;
                }
                b{
                  font-style: normal;
                  font-size: 12px;
                  font-weight: 400;
                  margin-left: 3px;
                }
              }

            }
          }

        }
        .postGrade{
          padding-left: 15px;
          .postTitle{
            margin: 20px 0 15px 0;
            font-size:14px;
            font-family:PingFangHK-Medium,PingFangHK;
            font-weight:600;
            color:rgba(51,51,51,1);
            padding-left: 5px;
            box-sizing: border-box;
          }
          .postWrap{
            border:1px solid rgba(237,237,237,1);
            box-sizing: border-box;
            .el-row{
              /*height: 50px;*/
              line-height: 48px;
              font-size:14px;
              font-family:PingFangHK-Regular,PingFangHK;
              font-weight:400;
              color:rgba(102,102,102,1);
              text-align: left;
              .el-col{
                padding-left: 21px;
                border-right: 1px solid #EDEDED;
                border-bottom: 1px solid #EDEDED;
                &:nth-of-type(2n){
                  border-right: none;
                }
                &:nth-of-type(3){
                  border-bottom: none;
                }
                &:nth-of-type(4){
                  border-bottom: none;
                }
                i{
                  font-style: normal;
                  font-size: 18px;
                  color: #F56023;
                }
                b{
                  font-style: normal;
                  font-weight: 400;
                  font-size: 12px;
                  margin-left: 3px;
                }
              }
            }
          }
        }
      }
    }
  }

</style>
